<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>污染源监控结果查询 - 浙政钉</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#1890ff',
                        'gov-blue': '#2563eb',
                        'gov-green': '#059669',
                        'gov-red': '#dc2626'
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-gray-50">
    <div class="min-h-screen">
        <!-- 页面头部 -->
        <header class="bg-white shadow-sm sticky top-0 z-10">
            <div class="flex items-center justify-between p-4">
                <div class="flex items-center space-x-3">
                    <button onclick="goBack()" class="text-gray-600">
                        <i class="fas fa-arrow-left text-lg"></i>
                    </button>
                    <h1 class="text-lg font-semibold text-gray-800">污染源监控</h1>
                </div>
                <div class="flex items-center space-x-3">
                    <button onclick="showMap()" class="text-gray-600">
                        <i class="fas fa-map text-lg"></i>
                    </button>
                    <button onclick="refreshData()" class="text-gray-600">
                        <i class="fas fa-sync-alt text-lg"></i>
                    </button>
                </div>
            </div>
        </header>

        <div class="p-4">
            <!-- 实时监控概览 -->
            <div class="bg-gradient-to-r from-red-500 to-red-600 rounded-xl p-4 mb-6 text-white">
                <div class="flex items-center justify-between mb-3">
                    <h2 class="text-lg font-bold">实时监控状态</h2>
                    <div class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div>
                </div>
                <div class="grid grid-cols-3 gap-4">
                    <div class="text-center">
                        <p class="text-2xl font-bold">1,248</p>
                        <p class="text-red-100 text-sm">在线企业</p>
                    </div>
                    <div class="text-center">
                        <p class="text-2xl font-bold text-yellow-300">12</p>
                        <p class="text-red-100 text-sm">今日报警</p>
                    </div>
                    <div class="text-center">
                        <p class="text-2xl font-bold">98.5%</p>
                        <p class="text-red-100 text-sm">数据传输率</p>
                    </div>
                </div>
            </div>

            <!-- 功能导航 -->
            <div class="grid grid-cols-2 gap-4 mb-6">
                <div class="card cursor-pointer hover:shadow-lg" onclick="showCompanySearchModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-building text-blue-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">企业综合查询</h3>
                        <p class="text-gray-500 text-sm mt-1">一企一档信息查询</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showArchiveQueryModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-folder-open text-green-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">环保档案查询</h3>
                        <p class="text-gray-500 text-sm mt-1">企业全生命周期档案</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showRankingModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-purple-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-trophy text-purple-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">汇总排名</h3>
                        <p class="text-gray-500 text-sm mt-1">超标率达标率排名</p>
                    </div>
                </div>
                <div class="card cursor-pointer hover:shadow-lg" onclick="showMonitoringDataModal()">
                    <div class="text-center">
                        <div class="w-12 h-12 bg-orange-100 rounded-xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-chart-line text-orange-600 text-xl"></i>
                        </div>
                        <h3 class="font-semibold text-gray-800">在线监测数据</h3>
                        <p class="text-gray-500 text-sm mt-1">实时历史数据趋势</p>
                    </div>
                </div>
            </div>

            <!-- 报警信息 -->
            <div class="mb-6">
                <div class="flex items-center justify-between mb-3">
                    <h3 class="text-base font-semibold text-gray-800">最新报警</h3>
                    <div class="flex items-center space-x-2">
                        <span class="text-sm text-gray-500">自动刷新</span>
                        <div class="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
                    </div>
                </div>
                <div class="space-y-3" id="alertList">
                    <div class="bg-white rounded-lg p-4 border-l-4 border-red-500">
                        <div class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-red-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                                <i class="fas fa-exclamation-triangle text-red-600"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between">
                                    <h4 class="font-medium text-gray-800">浙江某某化工有限公司</h4>
                                    <span class="badge badge-danger">严重超标</span>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">SO2排放浓度 156mg/m³，超标56%</p>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="text-xs text-gray-500">2024-01-15 14:30:25</span>
                                    <div class="flex space-x-2">
                                        <button onclick="viewDetails('company1')" class="btn btn-outline text-xs px-2 py-1">查看详情</button>
                                        <button onclick="navigateToCompany('company1')" class="btn btn-primary text-xs px-2 py-1">导航</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg p-4 border-l-4 border-orange-400">
                        <div class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-orange-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                                <i class="fas fa-wifi text-orange-600"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between">
                                    <h4 class="font-medium text-gray-800">宁海某某印染厂</h4>
                                    <span class="badge badge-warning">设备离线</span>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">废水排放口监测设备失联</p>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="text-xs text-gray-500">2024-01-15 13:45:12</span>
                                    <div class="flex space-x-2">
                                        <button onclick="viewDetails('company2')" class="btn btn-outline text-xs px-2 py-1">查看详情</button>
                                        <button onclick="contactCompany('company2')" class="btn btn-warning text-xs px-2 py-1">联系企业</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-lg p-4 border-l-4 border-yellow-400">
                        <div class="flex items-start space-x-3">
                            <div class="w-8 h-8 bg-yellow-100 rounded-lg flex items-center justify-center flex-shrink-0 mt-1">
                                <i class="fas fa-chart-line text-yellow-600"></i>
                            </div>
                            <div class="flex-1">
                                <div class="flex items-center justify-between">
                                    <h4 class="font-medium text-gray-800">宁海某某制药公司</h4>
                                    <span class="badge badge-warning">轻度超标</span>
                                </div>
                                <p class="text-sm text-gray-600 mt-1">COD排放浓度持续上升，接近限值</p>
                                <div class="flex items-center justify-between mt-2">
                                    <span class="text-xs text-gray-500">2024-01-15 12:20:08</span>
                                    <div class="flex space-x-2">
                                        <button onclick="viewDetails('company3')" class="btn btn-outline text-xs px-2 py-1">查看详情</button>
                                        <button onclick="showTrend('company3')" class="btn btn-info text-xs px-2 py-1">趋势分析</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 数据统计图表 -->
            <div class="mb-6">
                <h3 class="text-base font-semibold text-gray-800 mb-3">今日统计</h3>
                <div class="grid grid-cols-2 gap-4">
                    <div class="card">
                        <h4 class="font-medium text-gray-800 mb-3">超标企业分布</h4>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-600">化工企业</span>
                                <div class="flex items-center space-x-2">
                                    <div class="w-20 h-2 bg-gray-200 rounded">
                                        <div class="w-16 h-2 bg-red-500 rounded"></div>
                                    </div>
                                    <span class="text-sm font-medium">8</span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-600">印染企业</span>
                                <div class="flex items-center space-x-2">
                                    <div class="w-20 h-2 bg-gray-200 rounded">
                                        <div class="w-8 h-2 bg-orange-500 rounded"></div>
                                    </div>
                                    <span class="text-sm font-medium">3</span>
                                </div>
                            </div>
                            <div class="flex items-center justify-between">
                                <span class="text-sm text-gray-600">制药企业</span>
                                <div class="flex items-center space-x-2">
                                    <div class="w-20 h-2 bg-gray-200 rounded">
                                        <div class="w-4 h-2 bg-yellow-500 rounded"></div>
                                    </div>
                                    <span class="text-sm font-medium">1</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <h4 class="font-medium text-gray-800 mb-3">达标率趋势</h4>
                        <div class="text-center">
                            <div class="w-16 h-16 mx-auto mb-2 relative">
                                <svg class="w-16 h-16 transform -rotate-90" viewBox="0 0 64 64">
                                    <circle cx="32" cy="32" r="28" stroke="#e5e7eb" stroke-width="8" fill="none"/>
                                    <circle cx="32" cy="32" r="28" stroke="#059669" stroke-width="8" fill="none" 
                                        stroke-dasharray="175.93" stroke-dashoffset="17.59"/>
                                </svg>
                                <div class="absolute inset-0 flex items-center justify-center">
                                    <span class="text-lg font-bold text-gray-800">90%</span>
                                </div>
                            </div>
                            <p class="text-sm text-gray-600">本月达标率</p>
                            <p class="text-xs text-green-600 mt-1">
                                <i class="fas fa-arrow-up"></i> +2.3%
                            </p>
                        </div>
                    </div>
                </div>
            </div>


        </div>
    </div>

    <!-- 弹窗系统 -->
    <!-- 企业综合查询弹窗 -->
    <div id="companySearchModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">企业综合查询</h3>
                <button class="modal-close" onclick="closeModal('companySearchModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-search">
                    <input type="text" placeholder="输入企业名称或统一社会信用代码" id="companySearchInput">
                </div>
                <div class="modal-list" id="companySearchResults">
                    <div class="modal-list-item" onclick="selectCompany('company1')">
                        <div class="flex items-center justify-between mb-2">
                            <h4 class="font-medium">浙江某某化工有限公司</h4>
                            <span class="badge badge-danger">超标</span>
                        </div>
                        <div class="grid grid-cols-2 gap-2 text-sm text-gray-600">
                            <div>行业类型：化工</div>
                            <div>监测点位：3个</div>
                            <div>排污许可证：有效</div>
                            <div>今日报警：2次</div>
                        </div>
                    </div>
                    <div class="modal-list-item" onclick="selectCompany('company2')">
                        <div class="flex items-center justify-between mb-2">
                            <h4 class="font-medium">宁海某某印染厂</h4>
                            <span class="badge badge-warning">离线</span>
                        </div>
                        <div class="grid grid-cols-2 gap-2 text-sm text-gray-600">
                            <div>行业类型：印染</div>
                            <div>监测点位：2个</div>
                            <div>排污许可证：有效</div>
                            <div>今日报警：1次</div>
                        </div>
                    </div>
                    <div class="modal-list-item" onclick="selectCompany('company3')">
                        <div class="flex items-center justify-between mb-2">
                            <h4 class="font-medium">宁海某某制药公司</h4>
                            <span class="badge badge-success">正常</span>
                        </div>
                        <div class="grid grid-cols-2 gap-2 text-sm text-gray-600">
                            <div>行业类型：制药</div>
                            <div>监测点位：1个</div>
                            <div>排污许可证：有效</div>
                            <div>今日报警：0次</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('companySearchModal')">取消</button>
                <button class="btn btn-primary" onclick="searchCompany()">搜索</button>
            </div>
        </div>
    </div>

    <!-- 环保档案查询弹窗 -->
    <div id="archiveQueryModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">企业环保档案查询</h3>
                <button class="modal-close" onclick="closeModal('archiveQueryModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="modal-search">
                    <input type="text" placeholder="输入企业名称" id="archiveSearchInput">
                </div>
                <div class="space-y-4">
                    <div class="border rounded-lg p-4">
                        <h4 class="font-medium mb-3">浙江某某化工有限公司</h4>
                        <div class="space-y-3">
                            <div class="flex items-center justify-between py-2 border-b">
                                <span class="text-sm">建设项目审批</span>
                                <div class="flex items-center space-x-2">
                                    <span class="badge badge-success">已通过</span>
                                    <i class="fas fa-eye text-gray-400 cursor-pointer" onclick="viewArchive('project')"></i>
                                </div>
                            </div>
                            <div class="flex items-center justify-between py-2 border-b">
                                <span class="text-sm">排污许可证</span>
                                <div class="flex items-center space-x-2">
                                    <span class="badge badge-success">有效期至2025.12</span>
                                    <i class="fas fa-eye text-gray-400 cursor-pointer" onclick="viewArchive('permit')"></i>
                                </div>
                            </div>
                            <div class="flex items-center justify-between py-2 border-b">
                                <span class="text-sm">在线监控</span>
                                <div class="flex items-center space-x-2">
                                    <span class="badge badge-danger">异常</span>
                                    <i class="fas fa-eye text-gray-400 cursor-pointer" onclick="viewArchive('monitor')"></i>
                                </div>
                            </div>
                            <div class="flex items-center justify-between py-2 border-b">
                                <span class="text-sm">信访投诉</span>
                                <div class="flex items-center space-x-2">
                                    <span class="badge badge-warning">3次</span>
                                    <i class="fas fa-eye text-gray-400 cursor-pointer" onclick="viewArchive('complaint')"></i>
                                </div>
                            </div>
                            <div class="flex items-center justify-between py-2">
                                <span class="text-sm">行政处罚</span>
                                <div class="flex items-center space-x-2">
                                    <span class="badge badge-danger">1次</span>
                                    <i class="fas fa-eye text-gray-400 cursor-pointer" onclick="viewArchive('penalty')"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('archiveQueryModal')">关闭</button>
            </div>
        </div>
    </div>

    <!-- 汇总排名弹窗 -->
    <div id="rankingModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">汇总排名</h3>
                <button class="modal-close" onclick="closeModal('rankingModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="flex items-center justify-between mb-4">
                    <h4 class="font-medium">排名统计</h4>
                    <select class="text-sm border rounded px-2 py-1" onchange="changeRankingPeriod(this.value)">
                        <option>本日</option>
                        <option>本月</option>
                        <option>本年</option>
                    </select>
                </div>
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">超标率排名（降序）</h4>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between p-2 bg-red-50 rounded">
                                <span class="text-sm">某某化工厂</span>
                                <span class="font-medium text-red-600">15.6%</span>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-orange-50 rounded">
                                <span class="text-sm">某某印染厂</span>
                                <span class="font-medium text-orange-600">8.3%</span>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-yellow-50 rounded">
                                <span class="text-sm">某某制药厂</span>
                                <span class="font-medium text-yellow-600">3.2%</span>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">达标率排名（降序）</h4>
                        <div class="space-y-2">
                            <div class="flex items-center justify-between p-2 bg-green-50 rounded">
                                <span class="text-sm">某某电子厂</span>
                                <span class="font-medium text-green-600">98.9%</span>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-green-50 rounded">
                                <span class="text-sm">某某食品厂</span>
                                <span class="font-medium text-green-600">97.5%</span>
                            </div>
                            <div class="flex items-center justify-between p-2 bg-blue-50 rounded">
                                <span class="text-sm">某某纺织厂</span>
                                <span class="font-medium text-blue-600">95.1%</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('rankingModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportRanking()">导出数据</button>
            </div>
        </div>
    </div>

    <!-- 在线监测数据弹窗 -->
    <div id="monitoringDataModal" class="modal-overlay">
        <div class="modal-container">
            <div class="modal-header">
                <h3 class="modal-title">在线监测数据</h3>
                <button class="modal-close" onclick="closeModal('monitoringDataModal')">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="modal-body">
                <div class="mb-4">
                    <select class="w-full border rounded px-3 py-2" onchange="changeMonitoringCompany(this.value)">
                        <option>浙江某某化工有限公司</option>
                        <option>宁海某某印染厂</option>
                        <option>宁海某某制药公司</option>
                    </select>
                </div>
                <div class="space-y-4">
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">最新数据 (2024-01-15 14:30)</h4>
                        <div class="grid grid-cols-2 gap-3">
                            <div class="bg-red-50 p-3 rounded-lg">
                                <div class="text-xs text-gray-600">SO2浓度</div>
                                <div class="text-lg font-bold text-red-600">156 mg/m³</div>
                                <div class="text-xs text-red-500">超标56%</div>
                            </div>
                            <div class="bg-green-50 p-3 rounded-lg">
                                <div class="text-xs text-gray-600">NOx浓度</div>
                                <div class="text-lg font-bold text-green-600">85 mg/m³</div>
                                <div class="text-xs text-green-500">正常</div>
                            </div>
                            <div class="bg-yellow-50 p-3 rounded-lg">
                                <div class="text-xs text-gray-600">烟尘浓度</div>
                                <div class="text-lg font-bold text-yellow-600">28 mg/m³</div>
                                <div class="text-xs text-yellow-500">接近限值</div>
                            </div>
                            <div class="bg-blue-50 p-3 rounded-lg">
                                <div class="text-xs text-gray-600">排放流量</div>
                                <div class="text-lg font-bold text-blue-600">1,256 m³/h</div>
                                <div class="text-xs text-blue-500">正常</div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <h4 class="font-medium text-gray-700 mb-2">24小时趋势</h4>
                        <div class="bg-gray-100 rounded-lg h-32 flex items-center justify-center">
                            <p class="text-gray-500">趋势图表加载中...</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-outline" onclick="closeModal('monitoringDataModal')">关闭</button>
                <button class="btn btn-primary" onclick="exportMonitoringData()">导出数据</button>
            </div>
        </div>
    </div>

    <script>
        function goBack() {
            parent.postMessage({type: 'navigate', page: 'home.html'}, '*');
        }

        // 弹窗显示函数
        function showCompanySearchModal() {
            document.getElementById('companySearchModal').classList.add('show');
        }

        function showArchiveQueryModal() {
            document.getElementById('archiveQueryModal').classList.add('show');
        }

        function showRankingModal() {
            document.getElementById('rankingModal').classList.add('show');
        }

        function showMonitoringDataModal() {
            document.getElementById('monitoringDataModal').classList.add('show');
        }

        // 弹窗关闭函数
        function closeModal(modalId) {
            document.getElementById(modalId).classList.remove('show');
        }

        // 弹窗交互函数
        function selectCompany(companyId) {
            showNotification(`已选择企业: ${companyId}`, 'success');
            closeModal('companySearchModal');
        }

        function searchCompany() {
            const input = document.getElementById('companySearchInput').value;
            showNotification(`搜索企业: ${input}`, 'info');
        }

        function viewArchive(type) {
            const types = {
                'project': '建设项目审批',
                'permit': '排污许可证',
                'monitor': '在线监控',
                'complaint': '信访投诉',
                'penalty': '行政处罚'
            };
            showNotification(`查看${types[type]}档案`, 'info');
        }

        function changeRankingPeriod(period) {
            showNotification(`切换到${period}排名`, 'info');
        }

        function exportRanking() {
            showNotification('正在导出排名数据...', 'success');
        }

        function changeMonitoringCompany(company) {
            showNotification(`切换到企业: ${company}`, 'info');
        }

        function exportMonitoringData() {
            showNotification('正在导出监测数据...', 'success');
        }

        // 地图显示函数（保持页面显示）
        function showMap() {
            // 这里可以跳转到一个专门的地图页面
            showNotification('正在加载地图...', 'info');
        }

        // 点击弹窗外部关闭
        document.addEventListener('DOMContentLoaded', function() {
            const modals = document.querySelectorAll('.modal-overlay');
            modals.forEach(modal => {
                modal.addEventListener('click', function(e) {
                    if (e.target === modal) {
                        modal.classList.remove('show');
                    }
                });
            });
        });

        function refreshData() {
            // 模拟数据刷新
            const alertList = document.getElementById('alertList');
            alertList.style.opacity = '0.5';
            setTimeout(() => {
                alertList.style.opacity = '1';
                showNotification('数据已刷新', 'success');
            }, 1000);
        }

        function viewDetails(companyId) {
            showNotification(`正在加载 ${companyId} 详细信息...`, 'info');
        }

        function navigateToCompany(companyId) {
            showNotification('正在启动导航...', 'info');
        }

        function contactCompany(companyId) {
            showNotification('正在联系企业...', 'info');
        }

        function showTrend(companyId) {
            showNotification('正在生成趋势分析...', 'info');
        }

        function showNotification(message, type = 'info') {
            const colors = {
                success: 'bg-green-500',
                warning: 'bg-yellow-500',
                danger: 'bg-red-500',
                info: 'bg-blue-500'
            };
            
            const notification = document.createElement('div');
            notification.className = `fixed top-4 left-4 right-4 ${colors[type]} text-white p-3 rounded-lg shadow-lg z-50`;
            notification.innerHTML = `
                <div class="flex items-center">
                    <i class="fas fa-info-circle mr-2"></i>
                    <span>${message}</span>
                </div>
            `;
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.remove();
            }, 3000);
        }
    </script>
</body>
</html>